<template>
  <view class="goods-detail" v-if="goodsdetailList">
    <view class="swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item
          v-for="item in goodsdetailList.pics"
          :key="item.pics_id"
          @click="preview(item.pics_mid_url)"
        >
          <image :src="item.pics_mid_url" mode="aspectFit"> </image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 商品价格 -->
    <view class="goods-price">￥{{ goodsdetailList.goods_price }}</view>
    <!-- 商品介绍 -->
    <view class="goods-content">
      <view class="goods-name">{{ goodsdetailList.goods_name }}</view>
      <view class="goods-collect">
        <view class="iconfont icon-shoucang"></view>
        <view>收藏</view>
      </view>
    </view>
    <!-- 图文详情 -->
    <view class="image-text">
      <view class="text">图文详情</view>
      <rich-text :nodes="goodsdetailList.goods_introduce"></rich-text>
    </view>
    <!-- 底部工具栏 -->
    <view class="btm-tool">
      <view class="btm-item">
        <view class="btm-service">
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
          <!-- 点击客服 -->
          <button open-type="contact">contact</button>
        </view>
        <view class="btm-share">
          <view class="iconfont icon-yixianshi-"></view>
          <view>分享</view>
          <!-- 点击分享 -->
          <button open-type="share">share</button>
        </view>
        <navigator
          class="btm-cats"
          url="/pages/cart/index"
          open-type="switchTab"
        >
          <!-- 购物车 -->
          <view class="iconfont icon-gouwuche"></view>
          <view>购物车</view>
        </navigator>
      </view>
      <view class="btm-cat" @click="goodsAdd">
        加入购物车
      </view>
      <view class="btm-buy">
        立即购买
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      goodsdetailList: null,
      data: {
        goods_id: "",
      },
    };
  },
  onLoad(option) {
    this.data.goods_id = option.id || 9832;
    this.goodsdetailLoad();
  },
  methods: {
    async goodsdetailLoad() {
      const res = await this.request({
        url: "/goods/detail",
        data: this.data,
      });
      console.log(res);
      this.goodsdetailList = res;
    },
    // 点击轮播图的事件 放大预览
    preview(current) {
      uni.previewImage({
        current: current, // 当前显示图片的http链接
        urls: this.goodsdetailList.pics.map((v) => v.pics_mid_url), // 需要预览的图片http链接列表
      });
    },

    // 加入购物车
    goodsAdd() {
      uni.showToast({
        title: "加入成功",
        mask: true,
      });

      // 小程序如果本地储存没有数据,会返回''
      const carts = uni.getStorageSync("carts") || [];
      // console.log(carts[1].goods_id);
      console.log(carts);
      console.log(this.goodsdetailList.goods_id);
      let index = carts.findIndex(
        (goods) => goods.goods_id == this.goodsdetailList.goods_id
      );

      if (index == -1) {
        // 没有加入过购物车该商品,加一个属性数量count为1
        this.goodsdetailList.count = 1;
        // 属性为了方便我们在下一个页面购物车页面的使用
        this.goodsdetailList.checked = true;
        carts.push(this.goodsdetailList);
      } else {
        // 找到了加入过购物车过该商品,找到对应索引的那个商品数量加1
        carts[index].count++;
      }
      // 最后重新存在储存里
      uni.setStorageSync("carts", carts);
    },
  },
};
</script>

<style lang="scss">
.goods-detail {
  .swiper {
    swiper {
      text-align: center;
      height: 70vw;
    }
    swiper-item {
      image {
        height: 100%;
        padding-bottom: 50rpx;
      }
    }
  }

  .goods-price {
    padding: 20rpx;
    color: $theme-color;
    font-size: 32rpx;
    font-weight: 600;
  }
  .goods-content {
    display: flex;
    padding: 20rpx 0;
    border-top: 4rpx solid #ddd;
    border-bottom: 4rpx solid #ddd;

    .goods-name {
      flex: 1;
      align-items: center;
      padding: 0 20rpx;
      // 拆散单词
      word-break: break-all;
      @include ellipsis(2);
    }
    .goods-collect {
      text-align: center;
      padding: 0 20rpx;
      border-left: 1rpx solid #000;
    }
  }
  .image-text {
    padding-bottom: 80rpx;
    .text {
      padding: 20rpx;
      color: $theme-color;
      font-size: 32rpx;
      font-weight: 600;
    }
  }
  .btm-tool {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1rpx solid #eee;

    .btm-item {
      background-color: #fff;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;

      view {
        text-align: center;
        font-size: 30rpx;
      }
      .btm-service {
        position: relative;

        button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
      .btm-share {
        position: relative;
        text-align: center;
        font-size: 30rpx;
        button {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }

    .btm-cat {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffa500;
      color: #fff;
      font-size: 30rpx;
      font-weight: 600;
      padding: 30rpx;
    }
    .btm-buy {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eb4450;
      color: #fff;
      font-size: 30rpx;
      font-weight: 600;
      padding: 30rpx;
    }
  }
}
</style>
